<div
  #checkbox
  class="x-checkbox"
  [class.x-flex]="justify || align || direction"
  [class.x-disabled]="disabled"
  [class.x-required]="requiredIsEmpty"
  [class.x-invalid]="invalid"
>
  <label *ngIf="label" [style.width]="labelWidth" [ngClass]="labelMap">{{ label }}</label>
  <ng-container *ngIf="button || icon; else default">
    <x-buttons>
      <x-button
        *ngFor="let item of nodes; trackBy: trackByItem"
        [icon]="item.icon"
        [title]="item.title"
        [size]="size"
        [activated]="getChecked(item.id)"
        [disabled]="getDisabled(item.disabled)"
        (click)="checkboxClick($event, item)"
        >{{ item.label }}</x-button
      >
    </x-buttons>
  </ng-container>
</div>

<ng-template #default>
  <div class="x-checkbox-row">
    <div
      class="x-checkbox-item"
      *ngFor="let item of nodes; trackBy: trackByItem"
      [class.x-checked]="getChecked(item.id)"
      [class.x-disabled]="disabled || item.disabled"
      [class.x-indeterminate]="indeterminate"
      (click)="checkboxClick($event, item)"
    >
      <span class="x-checkbox-box"></span>
      <span class="x-checkbox-label">
        <ng-container *xOutlet="item.label; context: { $node: item }">{{ item.label }}</ng-container>
      </span>
    </div>
  </div>
</ng-template>
